@font-face {
    font-family: 'fzht';
    /*字体名称*/
    src: url('../../assets/fzht.ttf');
    /*字体源文件*/
}
p{
    margin: 0;
    padding: 0;
}
.bg {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: url("../../assets/qybg.png") fixed center center no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    .bg_top {
        height: 8vh;
        position: absolute;
        width: 100%;
        top: 10vh;
        display: flex;
        background: url("../../assets/bgtop.png") fixed center center no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%; // justify-content: center;
        align-items: center;
        .bgtop_L {
            width: 50px;
            height: 50px;
            // background-color: red;
            margin-left: 10vh;
            margin-right: 5vh;
        }
        .bgtop_R {
            flex: 1;
            padding: 2vh 0px;
            box-sizing: border-box;
            .bgtop_z {
                font-size: 26px;
                font-family: fzht;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-shadow: 0px 1px 4px rgba(3, 3, 3, 0.7);
            }
            .bgtop_y {
                font-size: 12px;
                font-family: fzht;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-shadow: 0px 1px 4px rgba(3, 3, 3, 0.7);
            }
        }
    }
    .bg_moddle {
        height: 300px;
        width: 100%; // background-color: aqua;
        position: absolute;
        top: 50%; // background-color: red;
        transform: translateY(-50%);
        .clire {
            width: 90px;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            background: #fff;
            border: 6px solid rgba(255, 255, 255, 1);
            border-radius: 50%;
            top: -5vh;
            z-index: 999;
        }
        .bgmoddle_b {
            position: absolute;
            right: 20vh;
            background: #ffffffbd;
            display: flex; // justify-content: center;
            flex-direction: column;
            border-radius: 4px;
            width: 280px;
            height: 100%;
            box-sizing: border-box;
            padding-top: 5vh;
            align-items: center;
            .item_name {
                background: rgba(233, 238, 242, 1);
                border-radius: 4px;
                border: 0px;
                margin-bottom: 1vh;
                width: 220px;
                height: 30px;
            }
            .duber {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 220px;
            }
        }
    }
    .bg_bottom {
        height: 4vh;
        position: absolute;
        width: 100%;
        bottom: 10vh;
        display: flex;
        background: url("../../assets/bgtop.png") fixed center center no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%; // justify-content: center;
        align-items: center;
        justify-content: space-around;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-shadow: 0px 1px 4px rgba(3, 3, 3, 0.7);
        box-sizing: border-box;
        padding: 0px 20vh;
    }
}